<template>
	<div>
		
		<div style="margin: 15px;">
      <el-input style="width: 220px;" placeholder="请输入你要查询的商品名称" v-model="ProductName"></el-input>
      <el-button type="primary" style="margin: 10px;" @click="getquery">查询</el-button>
      <el-button type="success" @click="openadd"><i class="el-icon-circle-plus-outline"></i> 添加</el-button>
    </div>
		
		<el-table v-loading="loading" ref="multipleTableRef" :data="tableData" 
		border style="width: 100%" height="440" @select="selectchange" @select-all="selectallchange" row-key="Id">
			<el-table-column type="selection" width="55" />
			<el-table-column fixed prop="Id" label="Id" width="50" />
			<el-table-column prop="ProductName" label="商品名称" width="120" />
			<el-table-column prop="Price" label="价格" width="150" />
			<el-table-column prop="ProductImg" label="预览图片" width="120" >
                 <template #default="scoped">
                <img :src="'http://localhost:5242/'+scoped.row.ProductImg" style="width: 100px;height: 80px;"/>
                </template>
            </el-table-column>
			<el-table-column prop="Material" label="材质" width="140" />
			<el-table-column prop="Specifications" label="大小" width="150" />
			<el-table-column prop="CreateTime" label="创建时间" width="180" />
			<el-table-column prop="Status" label="状态" width="60" />
			
			<el-table-column fixed="right" label="操作" min-width="120">
				<template #default="scope">
					
					<el-button link type="primary" size="small" @click="ShowEdit(scope.row.Id)">编辑</el-button>
					<el-button link type="primary" size="small" @click="Delete(scope.row.Id)">删除</el-button>
					<!-- <el-button link type="primary" size="small" @click="Authorization(scope.row.Id)">授权</el-button> -->
				</template>
			</el-table-column>
		</el-table>

		<div class="demo-pagination-block">
			<el-pagination v-model:current-page="pageIndex" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
				:size="size" :disabled="disabled" :background="background"
				layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
				@current-change="handleCurrentChange" />
		</div>
		
		<div style="width: 100%;">
			<el-button  type="primary" style="position: absolute;right: 10px;bottom: 10px;" @click="subsave">确认</el-button>
		</div>
		
		<el-dialog v-model="dialogAddVisible" title="添加" width="600" draggable>
			<ProduAdd @onSave="closeAdd" v-if="dialogAddVisible"></ProduAdd>
		</el-dialog>
		<el-dialog v-model="dialogUpdateVisible" title="修改" width="600" draggable>
			<ProduUpdate :Id="Id" @onSave="closeUpdate" v-if="dialogUpdateVisible"></ProduUpdate>
		</el-dialog>
		
	</div>
</template>

<script setup lang="ts">
	import produapi from "@/api/produapi"
	import ProduAdd from "@/Views/Produ/ProduAdd.vue"
	import ProduUpdate from "@/Views/Produ/ProduUpdata.vue"
	import { ref, onMounted, reactive } from "vue"
	import type { ComponentSize } from 'element-plus'
	import { ElMessageBox, ElNotification } from 'element-plus'


	
	const Id = ref(0);
	const ProductName=ref("")
	const tableData = ref([])
	const total = ref(0);
	const pageSize = ref(10);
	const pageIndex = ref(1);
	const dialogAddVisible=ref(false);
	const dialogUpdateVisible = ref(false);
	const dialogDetailVisible = ref(false);
		
	const loading = ref(true)
	const size = ref<ComponentSize>('default')
	const background = ref(false)
	const disabled = ref(false)
	
	
	const emit= defineEmits(["CloseSelect"])
	const myporop=defineProps({
		seledata:Array
	})
	const multipleTableRef = ref<InstanceType<typeof ElTable>>()
	const selectiondata=ref<any[]>([]);//保存数据
	const selectionid=ref<any[]>([]);//保存id
	if (myporop.seledata) {
		myporop.seledata.forEach((val:any)=>{
			selectiondata.value.push(val)
			selectionid.value.push(val.Id)
		})
	}
	
	const getdata = (ProductName:string="",PageSize:number=10,PageIndex:number=1) => {
		var query = {
			ProductName: ProductName,
			PageSize: PageSize,
			PageIndex: PageIndex
		}
		produapi.query(query).then(res => {
			console.log("usedata=", res);
			tableData.value = res.data
			total.value = res.total;
			 loading.value = false;
			
			if (myporop.seledata) {
				selectiondata.value.forEach((val: any) => {
					multipleTableRef.value!.toggleRowSelection(val, true)
				})
			}
		}).catch(err => {
			console.log("err=>", err);
		})
	}
	
	onMounted(() => {
		getdata(ProductName.value,pageSize.value,pageIndex.value);
	})

	const openadd=()=>
	{
		dialogAddVisible.value=true;
	}

	const closeAdd=()=>
	{
		dialogAddVisible.value=false;
		pageIndex.value = 1;
		getdata(ProductName.value, pageSize.value, pageIndex.value);
	}

	const ShowDetail = (Id : number) => {
		console.log("Id=", Id);
	}
	const ShowEdit = (id : number) => {
		console.log("Id=", id);
		Id.value = id;
		dialogUpdateVisible.value = !dialogUpdateVisible.value
	}
	const closeUpdate = (flag : boolean) => {
		//关闭弹窗
		dialogUpdateVisible.value = !dialogUpdateVisible.value
		//刷新数据
		pageIndex.value = 1;
		getdata(ProductName.value, pageSize.value, pageIndex.value);
	}
	
	const getquery=()=>
	{
		console.log(ProductName)
		pageIndex.value=1;
		getdata(ProductName.value,pageSize.value,pageIndex.value);
	}

	const handleSizeChange = (val: number) => {
	  console.log(`${val} items per page`)
	  pageSize.value=val;
	  pageIndex.value=1;
	 getdata(ProductName.value,pageSize.value,pageIndex.value);
	}
	const handleCurrentChange = (val: number) => {
	  console.log(`current page: ${val}`)
	    pageIndex.value=val;
	  getdata(ProductName.value,pageSize.value,pageIndex.value);
	}
	const Delete = (Id : number) => {
		console.log("Id=", Id);
		ElMessageBox.confirm("确认删除吗？").then(() => {
			//
			produapi.del({id:Id}).then(res => {
				console.log("res=>", res)
				if (res.code == 1) {
					ElNotification({
						title: 'Success',
						message: '删除成功',
						type: 'success',
						duration: 800,
						onClose: () => {
							//emit("onSave", true)
							getdata(ProductName.value, pageSize.value, pageIndex.value);
						}
					})
				} else {
					ElNotification({
						title: 'Error',
						message: '失败',
						type: 'Error',
						duration: 800,
					})
				}
			}).catch(err => {

			})
		}).catch(() => {

		})
	};
	
const subsave=()=>{
	console.log("data=",selectiondata.value);
	emit("CloseSelect",selectiondata.value);
};

// 单选,取消单选
function selectchange(val: any, row: any) {
    let selected: boolean = val.indexOf(row) !== -1
    if (selected) {
        let index = selectionid.value.indexOf(row.Id);
        if (index === -1) {
            selectiondata.value.push(row)
            selectionid.value.push(row.Id)
        }
    } else {
        let index = selectionid.value.indexOf(row.Id);       
        if (index !== -1) {
            selectiondata.value.splice(index, 1);
            selectionid.value.splice(index,1)
        }
    }
};
//全选，取消全选
function selectallchange(val:any){
	let selecteds:any[]=[];
	val.forEach((ele:{Id:any;})=>{
		tableData.value.forEach((eles:any)=>{
			if(ele.Id===eles.Id){
				selecteds.push(ele)
			}
		})
	});
	if(selecteds.length>0){
		tableData.value.forEach((row:any)=>{
			let index = selectionid.value.indexOf(row.Id);
			if (index === -1) {
				selectiondata.value.push(row)
				selectionid.value.push(row.Id)
			}
		});
	}else{
		tableData.value.forEach((val: any) => {
			let index = selectionid.value.indexOf(val.Id);
			if (index !== -1) {
				selectiondata.value.splice(index, 1);
				selectionid.value.splice(index,1)
			}
		})
	}
};

</script>

<style>
</style>